<!--
/**
* Author: gqz
* Date: 2021-08-20 17:55
* Desc: ZmSelect
*/
-->
<template>
  <view :style="customStyle" :class="[{ disabled }, customClass]" class="zm-select">
    <view class="flex flex-m">
      <view class="zm-select__input flex-1" @click="handelClick">
        <text class="c-disabled" v-if="!showVal">
          {{ placeholder }}
        </text>
        <text v-if="showVal">{{ showVal }}</text>
      </view>
      <template v-if="!disabled">
        <u-icon @click="handelClear" class="mr10" size="32" color="#c0c4cc" v-if="clearable && value" name="close-circle-fill" />
        <u-icon @click="handelClick" color="#999" class="ml10" :name="arrowIcon" />
      </template>
    </view>

    <zm-popup-picker
      :has-search="hasSearch"
      v-model="visible"
      v-if="visible"
      :check-val="value"
      :list="dataList"
      :label-key="labelKey"
      :val-key="valKey"
      @confirm="handelConfirm"
    />
  </view>
</template>

<script>
  import styleMixins from '@/mixins/styleMixins'
  import { getModelDataByKey } from '@/utils'
  import ZmPopupPicker from '@/commons/ZmPopupPicker/index.vue'
  export default {
    name: 'yy-select',
    mixins: [styleMixins],
    components: { ZmPopupPicker },
    props: {
      apiKey: {
        type: String,
        default: ''
      },
      customClass: { type: String },
      // 背景颜色 背景颜色优先级 > type
      apiName: {
        type: String
      },
      hasSearch: {
        type: Boolean
      },
      clearable: {
        type: Boolean
      },
      arrowIcon: {
        type: String,
        default: 'arrow-right'
      },
      disabled: {
        type: Boolean
      },
      placeholder: {
        type: String,
        default: '请选择'
      },
      apiQuery: {
        type: Object,
        default: () => ({})
      },
      type: {
        type: String
      },
      value: {
        type: [String, Number],
        default: ''
      },
      hasAll: {
        type: Boolean,
        default: false
      },
      labelKey: {
        type: String,
        default: 'name'
      },
      valKey: {
        type: String,
        default: 'value'
      },
      list: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        apiDataList: [],
        visible: false
      }
    },
    computed: {
      currentCheck() {
        const val = this.value
        const item = this.dataList.find((i) => i[this.valKey] == val)
        return item || {}
      },

      showVal() {
        return this.currentCheck[this.labelKey] || ''
      },

      dataList() {
        if (this.apiDataList.length) {
          return this.apiDataList
        }
        if (this.list.length) {
          return this.list
        }
        if (this.type) {
          return getModelDataByKey(this.type)
        }
        return []
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        this.getApiDataList()
      },
      getApiDataList() {
        if (this.apiKey) {
          uni.$api[this.apiName][this.apiKey](this.apiQuery).then((res) => {
            this.apiDataList = this.hasAll ? [{ [this.valKey]: '-1', [this.labelKey]: '全部' }, ...res] : res
          })
        }
      },
      handelClick() {
        if (this.disabled) {
          return
        }
        this.visible = true
      },

      handelClear() {
        this.$emit('input', '')
      },

      handelConfirm(data) {
        this.$emit('input', data[this.valKey] || '', data[this.labelKey])
        this.confirm(data)
      },
      confirm(e) {
        this.$emit(e)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .zm {
    &-select {
      padding: 10px;
      border-radius: 20upx;
      border: 1px solid #e2e2e2;
      &.disabled {
        background: #e2e2e2;
      }
    }
  }
</style>
